<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>公告</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-family: 'Microsoft YaHei', SimHei, SimSun, sans-serif;
            font-size: 12px;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            font-stretch: normal;
            line-height: 18px;
            overflow-x: hidden;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .gonggao {
            overflow: hidden;
            width: 560px;
            height: 250px;
            background-color: #fff;
        }
        .gonggao #gogngao {
            width: 100%;
            height: 30px;
            background-color: #fff;
            border-bottom: #eaeaec solid 1px;
        }
        #gogngao li {
            float: left;
            width: 74px;
            font-size: 16px;
            line-height: 28px;
            text-align: center;
            color: #5e5e5e;
            cursor: pointer;
        }
         #gogngao li:last-child {
            float: right;
            width: 40px;
            height: 30px;
        }
        #gogngao li:last-child a {
            font-size: 14px;
        }
        #gogngao li:last-child span {
            float: right;
            display: block;
            margin-top: 10px;
            width: 9px;
            height: 9px;
            background: url("img/icon.png");
            background-position: 1px 1px;
            border: 1px solid #909BAA;
        }

         .tabs {
            display: none;
        }
        .tabs ul {
            margin-top: 10px;
        }
        .tabs ul li {
            width: 560px;
            height: 33px;
            float: left;
            cursor: pointer;
        }
         .tabs ul li:hover span {
            transform: rotateY(180deg);
            transition: all 0.4s linear 0.05s;
        }
        .tabs ul li span {
            float: left;
            display: block;
            width: 9px;
            height: 9px;
            margin: 15px 5px 0 0;
            background: url("img/icon.png");
            background-position: 0 -24px;
            transition: all 0.3s linear 0s;
        }
        .tabs ul li a {
            display: block;
            height: 33px;
            line-height: 33px;
            float: left;
        }
        .tabs ul li p {
            float: right;
            display: block;
            height: 33px;
            line-height: 33px;
        }
    </style>
    <script src="../js/jquery-3.1.0.min.js" type="text/javascript">
    </script>
</head>
<body>
    <div class="gonggao">
        <ul id="gogngao">
            <li style="border-bottom: 2px solid #e86656">最新</li>
            <li>新闻</li>
            <li>公告</li>
            <li>活动</li>
            <li>媒体</li>
            <li><a href="#">更多 <span></span></a></li>
        </ul>
        <div class="tabs" style="display: block">
            <ul>
                <li><span></span><a href="#">[新闻] 霸刀橙武曝光 多种组合独特造型</a><p>09/07</p></li>
                <li><span></span><a href="#">[新闻] “风骨霸刀”即将首测 幕后谜团浮出水面</a><p>09/07</p></li>
                <li><span></span><a href="#">[公告] 7月14日新服公告</a><p>07/01</p></li>
                <li><span></span><a href="#">[公告] 9月8日例行维护公告</a><p>09/07</p></li>
                <li><span></span><a href="#">[活动] 七周年庆典 十大活动进行中</a><p>09/07</p></li>
                <li><span></span><a href="#">[媒体] 178：《剑网3》重制版全方位视频图文展示</a><p>09/07</p></li>
            </ul>
        </div>
        <div class="tabs">
            <ul>
                <li><span></span><a href="#">[新闻] 霸刀橙武曝光 多种组合独特造型</a><p>09/07</p></li>
                <li><span></span><a href="#">[新闻] “风骨霸刀”即将首测 幕后谜团浮出水面</a><p>07/01</p></li>
                <li><span></span><a href="#">[新闻] 玩家分享：梦回稻香21结局视频图文攻略</a><p>07/01</p></li>
                <li><span></span><a href="#" style="color: red">[新闻] 中秋月饼图集 包装豪华还送特效挂件</a><p>09/07</p></li>
                <li><span></span><a href="#">[新闻] 欢乐中秋行《剑网3》9月合作漫展推荐</a><p>07/01</p></li>
                <li><span></span><a href="#">[新闻] 郭炜炜谈霸刀 单心法三体态的DPS</a><p>09/07</p></li>
            </ul>
        </div>
        <div class="tabs">
            <ul>
                <li><span></span><a href="#">[公告] 7月14日新服公告</a><p>07/07</p></li>
                <li><span></span><a href="#">[公告] 9月8日例行维护公告</a><p>09/07</p></li>
                <li><span></span><a href="#">[公告] 9月5日例行维护公告（已完成）</a><p>09/05</p></li>
                <li><span></span><a href="#">[公告] 9月1日例行维护公告（已完成）</a><p>09/01</p></li>
                <li><span></span><a href="#">[公告] 8月29日例行维护公告（已完成）</a><p>08/29</p></li>
                <li><span></span><a href="#">[公告] 8月25日例行维护公告（已完成）</a><p>08/25</p></li>
            </ul>
        </div>
        <div class="tabs">
            <ul>
                <li><span></span><a href="#">[活动] 七周年庆典 十大活动进行中</a><p>09/07</p></li>
                <li><span></span><a href="#">[活动] 充值送双人驴车 免费直升90级（已结束）</a><p>09/07</p></li>
                <li><span></span><a href="#">[活动] 充值送豪礼 双人秋千免费领（已结束）</a><p>07/01</p></li>
                <li><span></span><a href="#">[活动] 第一届竞技大师邀请赛（已结束）</a><p>09/07</p></li>
                <li><span></span><a href="#">[活动] 充值送礼 萌狐跟宠免费领（已结束）</a><p>09/07</p></li>
                <li><span></span><a href="#">[活动] PVP战阶升级大提速（已结束）</a><p>09/07</p></li>
            </ul>
        </div>
        <div class="tabs">
            <ul>
                <li>
                    <span></span>
                    <a href="#">[媒体] 178：《剑网3》重制版全方位视频图文展示</a><p>09/07</p>
                </li>
                <li>
                    <span></span>
                    <a href="#">[媒体] 178：《剑网3：指尖江湖》全方位试玩展示</a><p>07/01</p>
                </li>
                <li>
                    <span></span>
                    <a href="#">[媒体] 52PK：现场实录 剑网3重制版极清画质展现</a><p>07/01</p>
                </li>
                <li>
                    <span></span>
                    <a href="#">[媒体] 游讯网七周年发布会报道专题</a><p>09/07</p>
                </li>
                <li>
                    <span></span>
                    <a href="#">[媒体] 58game七周年发布会直播专题</a><p>09/07</p>
                </li>
                <li>
                    <span></span>
                    <a href="#">[媒体] 太平洋游戏：七周年发布会 祝福留言送礼包</a><p>09/07</p>
                </li>
            </ul>
        </div>
    </div>
</body>
<script>
    window.onload = function(){
        var a = document.getElementById('gogngao').getElementsByTagName('li');
        var b = document.getElementsByClassName('tabs');

        for(var i=0;i<a.length;i++){
            a[i].id = i;
            a[i].onclick = function(){
                tab(this.id);
            }
        }
        function tab(obj){
            for(var j=0;j<a.length;j++){
                if(obj==j){
                    a[j].style.borderBottom ='2px solid #e86656';
                    a[j].style.color ='#e86656';
                    b[j].style.display = 'block';
                }else{
                    a[j].style.borderBottom ='';
                    a[j].style.color ='';
                    b[j].style.display = '';
                }
            }
        }
    }

</script>
</html>